<script setup lang="ts">
import { SearchOutlined, DownOutlined } from '@ant-design/icons-vue'
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()
const searchValue = ref(route.query.query || '')

// 获取搜索框的引用
const inputRef = ref<any>(null)

// 模拟搜索的数据
const courses = ref([
  {
    id: 1,
    title: 'Vue3入门课程',
    description: '学习Vue3框架的基础知识',
    duration: '40小时',
    people: '100人',
    publishDate: '2021-06-01',
    instructor: '张三',
    image: 'src/assets/courses/vue3.png',
  },
  {
    id: 2,
    title: 'React.js深度讲解',
    description: '学习React框架的深入知识',
    duration: '50小时',
    people: '200人',
    publishDate: '2021-07-10',
    instructor: '李四',
   image: 'src/assets/courses/React.js.png',
  },
  {
    id: 3,
    title: 'Python编程',
    description: '学习Python编程的基础和进阶',
    duration: '60小时',
    people: '300人',
    publishDate: '2021-05-15',
    instructor: '王五',
   image: 'src/assets/courses/Python.png',
  },
  {
    id: 4,
    title: 'Java基础教程',
    description: '掌握Java语言的基本语法和编程技巧',
    duration: '45小时',
    people: '150人',
    publishDate: '2021-04-22',
    instructor: '赵六',
   image: 'src/assets/courses/java.png',
  },
  {
    id: 5,
    title: '前端开发实战',
    description: '从零开始学习前端开发，构建动态网站',
    duration: '80小时',
    people: '250人',
    publishDate: '2021-08-12',
    instructor: '孙七',
   image: 'src/assets/courses/qianduan.png',
  },
  {
    id: 6,
    title: '大数据分析与应用',
    description: '学习如何处理和分析大数据',
    duration: '70小时',
    people: '180人',
    publishDate: '2021-09-01',
    instructor: '周八',
   image: 'src/assets/courses/dashuju.png',
  },
  {
    id: 7,
    title: '机器学习基础',
    description: '掌握机器学习的基本算法与应用',
    duration: '50小时',
    people: '300人',
    publishDate: '2021-10-10',
    instructor: '吴九',
   image: 'src/assets/courses/jiqi.png',
  },
  {
    id: 8,
    title: '深度学习与神经网络',
    description: '学习深度学习的核心理论与实践',
    duration: '90小时',
    people: '220人',
    publishDate: '2021-11-15',
    instructor: '郑十',
   image: 'src/assets/courses/shenjing.png',
  },
  {
    id: 9,
    title: 'Web全栈开发',
    description: '从前端到后端，全面学习Web开发技术',
    duration: '100小时',
    people: '350人',
    publishDate: '2021-12-01',
    instructor: '钱一',
   image: 'src/assets/courses/Web.png',
  },
  {
    id: 10,
    title: 'AI基础与应用',
    description: '了解AI的基本概念与实际应用',
    duration: '60小时',
    people: '270人',
    publishDate: '2021-01-05',
    instructor: '冯二',
   image: 'src/assets/courses/AI.png',
  },
  {
    id: 11,
    title: 'JavaScript高级编程',
    description: '深入掌握JavaScript的高级编程技巧',
    duration: '55小时',
    people: '190人',
    publishDate: '2021-02-20',
    instructor: '朱三',
   image: 'src/assets/courses/JavaScript.png',
  },
  {
    id: 12,
    title: 'React Native开发',
    description: '学习如何使用React Native开发跨平台应用',
    duration: '65小时',
    people: '210人',
    publishDate: '2021-03-15',
    instructor: '何四',
   image: 'src/assets/courses/React.png',
  },
  {
    id: 13,
    title: 'Node.js全栈开发',
    description: '掌握Node.js后端开发技术，打造高效应用',
    duration: '75小时',
    people: '300人',
    publishDate: '2021-05-10',
    instructor: '刘五',
   image: 'src/assets/courses/React.js.png',
  },
  {
    id: 14,
    title: 'HTML5与CSS3实战',
    description: '深入学习HTML5与CSS3，开发响应式网页',
    duration: '40小时',
    people: '150人',
    publishDate: '2021-07-25',
    instructor: '马六',
   image: 'src/assets/courses/HTML5.png',
  },
  {
    id: 15,
    title: 'Git与版本控制',
    description: '掌握Git的基本命令与协作技巧',
    duration: '30小时',
    people: '120人',
    publishDate: '2021-08-05',
    instructor: '王七',
   image: 'src/assets/courses/Git.png',
  },
])

// 搜索过滤
const filteredCourses = ref(courses.value)

// 搜索事件
const searchCourses = () => {
  // 清除搜索值两端的空格并转小写
  const searchText = searchValue.value.trim().toLowerCase()

  if (searchText) {
    filteredCourses.value = courses.value.filter(course =>
      course.title.toLowerCase().includes(searchText) ||
      course.description.toLowerCase().includes(searchText)
    )
  } else {
    filteredCourses.value = courses.value // 如果没有输入内容，显示所有课程
  }
}

// 监听路由查询变化，触发搜索
watch(
  () => route.query.query, 
  (newQuery) => {
    searchValue.value = newQuery || ''
    searchCourses() // 路由变化时，触发搜索
  },
  { immediate: true } // 页面加载时立即执行一次
)


onMounted(() => {
  // 页面加载时自动聚焦到搜索框
  if (inputRef.value) {
    inputRef.value.focus()
  }
})
</script>
<template>
  <div class="search">
    <div class="search-box">
      <div class="components-input-demo-presuffix" style="width: 25rem">
        <a-input
          ref="inputRef"
          v-model:value="searchValue"
          placeholder="请输入你要搜索的课程"
        >
          <template #prefix>
            <SearchOutlined :style="{ color: '#00aeec' }" />
          </template>
        </a-input>
      </div>
      <a-button @click="searchCourses">搜索</a-button> <!-- 点击按钮触发搜索 -->
    </div>
    <div class="search-result-box">
      <div class="search-result-box-title">
        <ul class="big-ul">
          <li>
            <span class="active">全站课程</span><span class="count">({{ filteredCourses.length }})</span>
          </li>
        </ul>
        <ul class="small-ul">
          <li class="active">全部课程</li>
          <li>专栏</li>
          <li>AI问</li>
          <li>手记</li>
          <li>慕课课程</li>
        </ul>
        <div class="search-result-box-title-course">
          <div
            class="course"
            v-for="item in filteredCourses"
            @click="router.push('/search-details')"
            :key="item.id"
          >
            <img :src="item.image" alt="" />
            <div class="course-info">
              <h3>{{ item.title }}</h3>
              <p>
                课程简介:{{ item.description }}
              </p>
              <p>
                总时长：<span>{{ item.duration }}</span>学习人数：<span>{{ item.people }}</span>发布时间：<span>{{ item.publishDate }}</span>讲师：<span>{{ item.instructor }}</span>
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="search-result-box-show">
        <img src="@/assets/kecheng.png" alt="" />
        <div>
          <educ-dynamic-hot-list />
        </div>
      </div>
    </div>
  </div>
</template>


<style scoped lang="scss">
.search {
  .search-box {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background-color: #ffff;

    button {
      width: 6.25rem;
      height: 1.875rem;
      margin-left: 1.25rem;
      color: #fff;
      background-color: #00aeec;
      border: none;
      border-radius: 0.3125rem;
    }
  }

  .search-result-box {
    display: flex;
    margin-top: 1.875rem;

    &-title {
      flex: 1 1 0;
      padding: 1.25rem;
      background-color: #fff;

      .big-ul {
        display: flex;
        align-items: center;

        li {
          display: flex;
          align-items: center;
          margin: 0 0.625rem;
          font-size: 1rem;
          cursor: pointer;

          .count {
            margin-left: 0.3125rem;
            font-size: 0.75rem;
            color: #999;
          }
        }

        .active {
          color: $educ-color-primary;
        }
      }

      .small-ul {
        display: flex;
        align-items: center;

        li {
          display: flex;
          align-items: center;
          margin: 0 0.625rem;
          font-size: 0.875rem;
          color: #999;
          cursor: pointer;
        }

        .active {
          color: $educ-color-primary;
        }
      }

      .ant-dropdown {
        margin-left: 0.625rem;
        font-size: 0.875rem;
        color: #999;
      }

      .course {
        display: flex;
        margin: 1.25rem 0;
        cursor: pointer;

        img {
          width: 12.5rem;
        }

        &-info {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          margin-left: 1.25rem;

          h3 {
            margin: 0;
            font-size: 1.125rem;
            color: #333;
          }

          p {
            display: flex;
            align-items: center;
            margin: 0.3125rem 0;
            font-size: 0.875rem;
            color: #666;

            span {
              padding-right: 0.3125rem;
              font-size: 0.75rem;
              color: #999;
            }
          }
        }
      }
    }

    &-show {
      margin-left: 1.25rem;

      div {
        margin-top: 0.625rem;
      }
    }
  }
}
</style>
